import Header from './components/Header'
import Advert from './components/Advert'
import Footer from './components/Footer'
import axios from 'axios'
import {Row,Col,List} from 'antd'
import {
  CalendarOutlined,
  FolderOutlined,
  FireOutlined,
} from '@ant-design/icons';
import './static/style/pages/main.css'
import Author from './components/Author.js';
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import servicePage from './config/apiUrl'

export default class Main extends Component {
  constructor(){
    super()
    this.state={
      mylist:[]
    }
  }
  //这个函数会在构造之后和render之前执行
  componentDidMount (){
    axios(servicePage.getArticleList).then(
        (res)=>{
          this.setState({mylist:res.data.data})
          // console.log(this.state.mylist)
        }
      ).catch(function (error) {
            console.log(error);
        })
    
  }

  render() {
    return (
      <div>
      <Header></Header>
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}>
          <List
            header={<div>欢迎来到梨苏橙的个人博客，现在您所在的是我的主页，这里会不定期跟新我自己的学习内容以及一些生活分享～</div>}
            itemLayout = "vertical"
            dataSource={this.state.mylist}
            renderItem={(item)=>(
              <List.Item>
                <div className="list-title">
                  <Link to={{pathname:"/detail/"+item.id}}>{item.title}</Link>
                  </div>
                <div className="list-icon">
                  <span><CalendarOutlined />{item.addTime}</span> &nbsp;
                  <span><FolderOutlined />{item.typeName}</span>&nbsp;
                  <span><FireOutlined />{item.view_count}</span>&nbsp;
                </div>
                <div className="list-context">{item.introduce}</div>
              </List.Item>
            )}
          />
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author></Author>
          <Advert></Advert>
        </Col>
      </Row>
      <Footer></Footer>
    </div>
    )
  }
}

// function Main() {
//   const [mylist,setMylist] = useState()
//   // console.log(this.myList)
//   return (
    
//   );
// }

// export default Main;
